<template>
    <h3>组件的生命周期</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">更新message</button>
</template>

<script>
/***
 * 生命周期函数
 *  创建期：beforeCreate created
 *  挂载期：beforeMount   mounted
 *  更新期：beforeUpdate  updated
 *  销毁期：beforeUnmount unmounted
 */
export default {
    beforeCreate() {
        console.log("组件创建之前");
    },
    created() {
        console.log("组件创建之后");
    },
    beforeMount() {
        console.log("组件挂载（渲染）之前");
    },
    mounted() {
        console.log("组件挂载（渲染）之后");
    },
    beforeUpdate() {
        console.log("组件更新之前");
    },
    updated() {
        console.log("组件更新之后");
    },
    beforeUnmount() {
        console.log("组件销毁之前");
    },
    unmounted() {
        console.log("组件销毁之后");
    },
    data() {
        return {
            message: "更新之前",
            isShow: true
        }
    },
    methods: {
        updateHandle() {
            this.message = "更新之后"
        }
    }
}
</script>